<template>
  <!-- 导航栏 -->
  <view class="navbar">
    <view class="statusBar" :style="{ height: getStatusBarHeight() + 'px' }"></view>
    <view class="titleBar" :style="{ height: getTitleBarHeight() + 'px' }">
      <view class="title">
        智能绘画
      </view>
    </view>
  </view>
  <!-- 填充区域 -->
  <view class="fill" :style="{ height: getNavBarHeight() + 'px' }"></view>

  <view class="container">
    <!-- 顶部AI绘画卡片 -->
    <view class="card ai-painting">
      <view class="card-content">
        <view class="card-title">AI绘画</view>
        <view class="card-desc">只需一句话，文字变成画</view>
      </view>
      <view class="create-button" @click="goDraw">前往创作</view>
    </view>

    <!-- 作品中心卡片 -->
    <view class="card photo-to-ai">
      <view class="card-content">
        <view class="photo-title">作品中心</view>
        <view class="card-desc">展示您的AI绘画作品</view>
      </view>
      <view class="create-button" @click="goWork">查看作品</view>
    </view>

    <!-- 分类导航 -->
    <view class="category-nav">
      <view
        v-for="(category, index) in categories"
        :key="index"
        class="category-item"
        :class="{ active: activeCategory === category }"
        @click="setActiveCategory(category)"
      >
        {{ category }}
      </view>
    </view>

    <!-- 图片列表 -->
    <view class="image-list" @scroll="handleScroll">
      <view
        class="image-card"
        v-for="(item, index) in imageList"
        :key="index"
        @click="goDetail(item)"
      >
        <image class="image-item" :src="item.image" mode="aspectFill"></image>
        <view class="image-tag">Ai生成</view>
        <view class="image-title">{{ item.title }}</view>
        <view class="image-author">{{ item.author.username }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ApigetImagesByType } from '/pages/api/image.js';
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from "@/utils/system.js";

// 定义分类列表
const categories = ref([
  '无风格',
  '动漫',
  '写实',
  'Q版简绘',
  '治愈男主',
  '治愈女主',
  '卡通手绘',
  '复古动漫',
  '港风胶片'
]);

// 当前激活的分类
const activeCategory = ref('无风格');

// 设置当前激活的分类
const setActiveCategory = (category) => {
  activeCategory.value = category;
  query.value.type = category;
  query.value.pageNum = 1; // 重置分页
  imageList.value = []; // 清空列表
  getImage();
};

const query = ref({
  pageNum: 1,
  size: 20,
  type: "无风格"
});

// 图片列表数据
const imageList = ref([]);

// 获取数据
const getImage = async () => {
  let res = await ApigetImagesByType(query.value);
  if (query.value.pageNum === 1) {
    imageList.value = res; // 第一页直接赋值
  } else {
    imageList.value = [...imageList.value, ...res]; // 后续页合并数据
  }
};

onMounted(() => {
  getImage();
});

// 跳到绘画界面
const goDraw = () => {
  uni.navigateTo({
    url: "/pages/tool/picture/piant"
  });
};

// 跳到作品页面
const goWork = () => {
  uni.navigateTo({
    url: "/pages/tool/picture/work"
  });
};

// 跳到详情
const goDetail = (val) => {
  const queryString = encodeURIComponent(JSON.stringify(val)); // 将对象序列化并编码
  uni.navigateTo({
    url: `/pages/tool/picture/details?data=${queryString}`
  });
};

// 滚动到底部的处理
let scrollTimer = null;
const handleScroll = (e) => {
  if (!scrollTimer) { // 节流
    scrollTimer = setTimeout(() => {
      const { scrollTop, scrollHeight, clientHeight } = e.detail;
      if (scrollTop + clientHeight >= scrollHeight - 10) { // 距离底部10px时触发
        if (imageList.value.length === query.value.size) {
          query.value.pageNum += 1; // 增加分页
          getImage();
        }
      }
      scrollTimer = null;
    }, 16); // 16ms 对应大约 60fps 的帧率
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #ffffff;
  color: #333333;
  padding: 0 20rpx 20rpx; /* 顶部不再添加状态栏高度的padding */
  margin-top: 20px;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  .titleBar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30rpx;
    .title {
      color: #333333;
      font-size: 36rpx;
      font-weight: 700;
      letter-spacing: 2rpx;
      line-height: 1.5;
    }
  }
}

/* AI绘画卡片科技风格 */
.card.ai-painting {
  background: linear-gradient(135deg, #002642 0%, #000c1f 100%);
  border: 1px solid rgba(0, 100, 200, 0.3);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 20rpx rgba(0, 100, 200, 0.2);
}

.card.ai-painting .card-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #ffffff;
  text-shadow: 0 0 10rpx rgba(0, 100, 200, 0.7);
}

.card.ai-painting .card-desc {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 20rpx;
  color: #ffffff;
}

.card.ai-painting .create-button {
  background: linear-gradient(90deg, #006eff, #0040ff);
  color: #ffffff;
  padding: 10rpx 30rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
  box-shadow: 0 0 15rpx rgba(0, 100, 200, 0.5);
}

/* 作品中心卡片科技风格 */
.card.photo-to-ai {
  background: linear-gradient(135deg, #1a1f2c 0%, #100f19 100%);
  border: 1px solid rgba(100, 0, 100, 0.3);
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 0 20rpx rgba(100, 0, 100, 0.2);
}

.card.photo-to-ai .photo-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #ffffff;
  text-shadow: 0 0 10rpx rgba(100, 0, 100, 0.7);
}

.card.photo-to-ai .card-desc {
  font-size: 28rpx;
  opacity: 0.9;
  margin-bottom: 20rpx;
  color: #ffffff;
}

.card.photo-to-ai .create-button {
  background: linear-gradient(90deg, #7f00ff, #ff006e);
  color: #ffffff;
  padding: 10rpx 30rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: bold;
  box-shadow: 0 0 15rpx rgba(100, 0, 100, 0.5);
}

/* 分类导航 */
.category-nav {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  margin-bottom: 30rpx;
  padding-bottom: 10rpx;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.category-item {
  padding: 10rpx 20rpx;
  opacity: 0.6;
  white-space: nowrap;
  font-size: 28rpx;
  color: #333333;
  border-bottom: 2rpx solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  &:hover {
    opacity: 0.9;
  }
  &.active {
    font-weight: bold;
    opacity: 1;
    border-bottom: 2rpx solid #4a90e2;
    color: #4a90e2;
  }
}

/* 图片列表 */
.image-list {
  column-count: 2;
  column-gap: 20rpx;
  padding-bottom: 60px;
  overflow: auto;
  transform: translate3d(0, 0, 0);
  will-change: scroll-position;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

.image-card {
  break-inside: avoid;
  margin-bottom: 20rpx;
  background-color: #f5f5f5;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
  will-change: transform;
}

.image-item {
  width: 100%;
  height: 340rpx;
  border-radius: 16rpx;
}

.image-tag {
  position: absolute;
  bottom: 100rpx;
  right: 20rpx;
  background: linear-gradient(135deg, #006eff, #0040ff);
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  color: #ffffff;
  box-shadow: 0 2rpx 10rpx rgba(0, 68, 255, 0.3);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.image-title {
  position: absolute;
  bottom: 60rpx;
  left: 20rpx;
  font-size: 30rpx;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #000000;
}

.image-author {
  position: absolute;
  bottom: 20rpx;
  left: 20rpx;
  font-size: 24rpx;
  opacity: 0.8;
  color: #000000;
}
</style>